import React, { useState, useMemo } from 'react';
import { Input, Modal, Row, Col, Space, Tooltip, Empty, Tabs } from 'antd';
import { Icon } from '@iconify/react';
import './style.css';

interface IconPickerProps {
  value?: string;
  onChange?: (icon: string) => void;
  placeholder?: string;
}

// 常用图标集合
const iconCollections = {
  solar: {
    name: 'Solar',
    icons: [
      'solar:home-linear',
      'solar:user-linear',
      'solar:users-group-rounded-linear',
      'solar:settings-linear',
      'solar:document-linear',
      'solar:folder-linear',
      'solar:chart-linear',
      'solar:shield-user-linear',
      'solar:key-linear',
      'solar:calendar-linear',
      'solar:inbox-linear',
      'solar:notification-linear',
      'solar:menu-dots-linear',
      'solar:database-linear',
      'solar:cloud-linear',
      'solar:archive-linear',
      'solar:bookmark-linear',
      'solar:heart-linear',
      'solar:star-linear',
      'solar:tag-linear',
      'solar:file-text-linear',
      'solar:trash-bin-minimalistic-linear',
      'solar:pen-linear',
      'solar:add-circle-linear',
      'solar:close-circle-linear',
      'solar:check-circle-linear',
      'solar:info-circle-linear',
      'solar:danger-circle-linear',
      'solar:question-circle-linear',
      'solar:magnifier-linear',
      'solar:filter-linear',
      'solar:refresh-linear',
      'solar:download-linear',
      'solar:upload-linear',
      'solar:share-linear',
      'solar:copy-linear',
      'solar:link-linear',
      'solar:lock-linear',
      'solar:unlock-linear',
      'solar:eye-linear',
      'solar:eye-closed-linear',
      'solar:phone-linear',
      'solar:letter-linear',
      'solar:map-point-linear',
      'solar:global-linear',
      'solar:user-bold',
      'solar:home-bold',
      'solar:settings-bold',
      'solar:document-bold',
      'solar:folder-bold',
      'solar:chart-bold',
    ],
  },
  mdi: {
    name: 'Material Design Icons',
    icons: [
      'mdi:home',
      'mdi:account',
      'mdi:account-group',
      'mdi:cog',
      'mdi:file-document',
      'mdi:folder',
      'mdi:chart-line',
      'mdi:shield-account',
      'mdi:key',
      'mdi:calendar',
      'mdi:inbox',
      'mdi:bell',
      'mdi:menu',
      'mdi:database',
      'mdi:cloud',
      'mdi:package',
      'mdi:bookmark',
      'mdi:heart',
      'mdi:star',
      'mdi:tag',
      'mdi:file-document-outline',
      'mdi:delete',
      'mdi:pencil',
      'mdi:plus-circle',
      'mdi:close-circle',
      'mdi:check-circle',
      'mdi:information',
      'mdi:alert-circle',
      'mdi:help-circle',
      'mdi:magnify',
      'mdi:filter',
      'mdi:refresh',
      'mdi:download',
      'mdi:upload',
      'mdi:share',
      'mdi:content-copy',
      'mdi:link',
      'mdi:lock',
      'mdi:lock-open',
      'mdi:eye',
      'mdi:eye-off',
      'mdi:phone',
      'mdi:email',
      'mdi:map-marker',
      'mdi:earth',
    ],
  },
  'carbon': {
    name: 'Carbon',
    icons: [
      'carbon:home',
      'carbon:user',
      'carbon:user-multiple',
      'carbon:settings',
      'carbon:document',
      'carbon:folder',
      'carbon:chart-line',
      'carbon:security',
      'carbon:password',
      'carbon:calendar',
      'carbon:inbox',
      'carbon:notification',
      'carbon:menu',
      'carbon:data-base',
      'carbon:cloud',
      'carbon:package',
      'carbon:bookmark',
      'carbon:favorite',
      'carbon:star',
      'carbon:tag',
      'carbon:document-blank',
      'carbon:trash-can',
      'carbon:edit',
      'carbon:add',
      'carbon:close',
      'carbon:checkmark',
      'carbon:information',
      'carbon:warning',
      'carbon:help',
      'carbon:search',
      'carbon:filter',
      'carbon:renew',
      'carbon:download',
      'carbon:upload',
      'carbon:share',
      'carbon:copy',
      'carbon:link',
      'carbon:locked',
      'carbon:unlocked',
      'carbon:view',
      'carbon:view-off',
      'carbon:phone',
      'carbon:email',
      'carbon:location',
      'carbon:earth',
    ],
  },
  'ri': {
    name: 'Remix Icon',
    icons: [
      'ri:home-line',
      'ri:user-line',
      'ri:group-line',
      'ri:settings-line',
      'ri:file-line',
      'ri:folder-line',
      'ri:line-chart-line',
      'ri:shield-user-line',
      'ri:key-line',
      'ri:calendar-line',
      'ri:inbox-line',
      'ri:notification-line',
      'ri:menu-line',
      'ri:database-line',
      'ri:cloud-line',
      'ri:archive-line',
      'ri:bookmark-line',
      'ri:heart-line',
      'ri:star-line',
      'ri:price-tag-line',
      'ri:file-text-line',
      'ri:delete-bin-line',
      'ri:edit-line',
      'ri:add-circle-line',
      'ri:close-circle-line',
      'ri:checkbox-circle-line',
      'ri:information-line',
      'ri:error-warning-line',
      'ri:question-line',
      'ri:search-line',
      'ri:filter-line',
      'ri:refresh-line',
      'ri:download-line',
      'ri:upload-line',
      'ri:share-line',
      'ri:file-copy-line',
      'ri:link',
      'ri:lock-line',
      'ri:lock-unlock-line',
      'ri:eye-line',
      'ri:eye-off-line',
      'ri:phone-line',
      'ri:mail-line',
      'ri:map-pin-line',
      'ri:global-line',
    ],
  },
};

const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, placeholder = '点击选择图标' }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [searchText, setSearchText] = useState('');
  const [activeTab, setActiveTab] = useState('solar');

  // 搜索过滤图标
  const filteredIcons = useMemo(() => {
    if (!searchText.trim()) {
      return iconCollections[activeTab as keyof typeof iconCollections]?.icons || [];
    }
    const text = searchText.toLowerCase();
    return iconCollections[activeTab as keyof typeof iconCollections]?.icons.filter(icon =>
      icon.toLowerCase().includes(text)
    ) || [];
  }, [searchText, activeTab]);

  // 选择图标
  const handleSelectIcon = (icon: string) => {
    onChange?.(icon);
    setModalVisible(false);
    setSearchText('');
  };

  // 清空图标
  const handleClear = () => {
    onChange?.('');
  };

  return (
    <>
      <Input
        value={value}
        placeholder={placeholder}
        onClick={() => setModalVisible(true)}
        readOnly
        allowClear
        onClear={handleClear}
        prefix={
          value ? (
            <Icon icon={value} style={{ fontSize: '18px' }} />
          ) : (
            <Icon icon="solar:gallery-add-linear" style={{ fontSize: '18px', color: '#bbb' }} />
          )
        }
        style={{ cursor: 'pointer' }}
      />

      <Modal
        title="选择图标"
        open={modalVisible}
        onCancel={() => {
          setModalVisible(false);
          setSearchText('');
        }}
        footer={null}
        width={800}
        className="icon-picker-modal"
      >
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <Input
            placeholder="搜索图标名称..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            prefix={<Icon icon="solar:magnifier-linear" />}
            allowClear
            size="large"
          />

          <Tabs
            activeKey={activeTab}
            onChange={setActiveTab}
            items={Object.entries(iconCollections).map(([key, collection]) => ({
              key,
              label: collection.name,
              children: (
                <div className="icon-picker-content">
                  {filteredIcons.length > 0 ? (
                    <Row gutter={[8, 8]}>
                      {filteredIcons.map((icon) => (
                        <Col span={3} key={icon}>
                          <Tooltip title={icon}>
                            <div
                              className={`icon-picker-item ${value === icon ? 'active' : ''}`}
                              onClick={() => handleSelectIcon(icon)}
                            >
                              <Icon icon={icon} style={{ fontSize: '24px' }} />
                            </div>
                          </Tooltip>
                        </Col>
                      ))}
                    </Row>
                  ) : (
                    <Empty description="未找到匹配的图标" />
                  )}
                </div>
              ),
            }))}
          />

          <div style={{ marginTop: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
            <Space direction="vertical" size="small" style={{ width: '100%' }}>
              <div style={{ fontSize: '12px', color: '#666' }}>
                提示：图标来自 <a href="https://icones.js.org" target="_blank" rel="noopener noreferrer">icones.js.org</a>
              </div>
              <div style={{ fontSize: '12px', color: '#666' }}>
                你也可以访问该网站搜索更多图标，然后在表单中直接输入图标名称（如：solar:home-linear）
              </div>
            </Space>
          </div>
        </Space>
      </Modal>
    </>
  );
};

export default IconPicker;

